<template>
	<view class="home">
		<swiper class="swiper" :indicator-dots="true" circular :autoplay="true" :interval="2000" :duration="500">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<view class="swiper-item">
					<img class="swiper-item-img" :src="item.url" alt="">
				</view>
			</swiper-item>
		</swiper>
		<notice-bar  left-icon="volume-o" color="#1989fa" background="#ecf9ff"
            text="了解更多功能,其他版本或模板,或需要在线演示请拨打电话13273965810"
			speed="100"
			>
		 </notice-bar>
		 <view class="mofang">
		 	<view class="mofang-item" v-for="(item,i) in navImgList">
		 		<img class="navImgs" :src="item.url">
		 	</view>
		 </view>
		 <view class="card1" v-for="(item,i) in cardImgList" :key="i">
		 	<view class="card1-head">
		 		<view class="left">
					<view class="left-span">
						<span>爆款</span>
					</view>
					<view class="left-span-keep">
						<span>{{item.title}}</span>
					</view>
					
		 		</view>
				<view class="right">
					<span>立即购买</span>
				</view>
		 	</view>
			<view class="card1-main">
				<view class="card1-main-left">
					<img :src="item.bigUrl" alt="">
				</view>
				<view class="card1-main-right">
					<img :src="item.cardImg1" alt="">
					<img :src="item.cardImg2" alt="">
				</view>
			</view>
		 </view>
		 <view class="more">
		 	<span>推荐服务</span>
			<span>更多 <van-icon name="arrow" /></span>
		 </view>
		 <view class="card2">
		 	<view class="card2-left" v-for="(item,i) in card2ImgList" :key="i">
		 		<img :src="item.url" alt="">
				<h3>{{item.title}}</h3>
				<span>{{item.message}}</span>
				<view class="card2-bottom">
					<span v-if="item.promotion" class="promotion">促销</span>
					<span class="price">￥{{item.price}}</span>
				</view>
		 	</view>
		 </view>
		 
	</view>
</template>

<script>
	export default{
		data(){
			return{
				//轮播图数据
				swiperList:[
					{
						url:'../../static/swiper/1.png'
					},
					{
						url:'../../static/swiper/2.png'
					}
				],
				//导航栏图片
				navImgList:[
					{
						url:'../../static/navImgList/1.png'
					},
					{
						url:'../../static/navImgList/2.png'
					},
					{
						url:'../../static/navImgList/3.png'
					},
					{
						url:'../../static/navImgList/4.png'
					}
				],
				//card1图片
				cardImgList:[
					{
						title:"保洁服务",
						bigUrl:'../../static/card/1.png',
						cardImg1:'../../static/card/2.png',
						cardImg2:'../../static/card/3.png'
					},
					{
						title:"家电清洗",
						bigUrl:'../../static/card/4.png',
						cardImg1:'../../static/card/5.png',
						cardImg2:'../../static/card/6.png'
					},
				],
				//card2图片
				card2ImgList:[
					{
						promotion:true,
						price:"153",
						title:'[单次]单人四小时保洁',
						message:'四小时日常保洁服务',
						url:'../../static/card2/1.png'
					},
					{   
						promotion:false,
						price:"149",
						title:'精致擦窗',
						message:'双面擦亮，玻璃无尘无水渍，明亮好心情',
						url:'../../static/card2/2.png'
					}
				]
			}
		}
	}
</script>

<style lang="less">
	.home{
		height: 2800rpx;
		background-color: #F2F6FC;
		.swiper{
			height: 350rpx;
			.swiper-item{
				height: 280rpx;
				display: block;
				line-height: 280rpx;
				text-align: center;
				.swiper-item-img{
					width: 98%;
					border-radius: 5px;
				}
			}
		}
		.mofang{
			height: 200rpx;
			padding: 12rpx;
			display: flex;
			box-sizing: content-box;
			justify-content: space-around;
			.mofang-item{
				.navImgs{
					width: 150rpx;
					height: 100%;
				}
			}
		}
		.card1{
			width: 96%;
			height: 400rpx;
			margin: auto;
			box-shadow: x-shadow 0 10px 10px rgba(0, 0, 0, .5);
			margin-top: 10rpx;
			border-radius: 5rpx;
			background: #fff;
			margin-bottom: 40rpx;
			.card1-head{
				padding: 20rpx;
				height:50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					line-height: 50rpx;
					display: flex;
					justify-content: space-between;
					width: 230rpx;
					.left-span{
						padding: 0;
						box-sizing: border-box;
						width: 80rpx;
						text-align: center;
						line-height: 50rpx;
						background-color: #C87175;
						color: #fff;
					}
					.left-span-keep{
						span{
							color: #8E8F90;
							font-size: 35rpx;
							font-weight: 600;
						}
					}
				}
				.right{
					width: 160rpx;
					height: 80%;
					padding: 10rpx;
					text-align: center;
					align-items: center;
					border-radius: 30rpx;
					background-color:#F5A200;
					span{
						color: #fff;
						font-size: 30rpx;
					}
				}
			}
			.card1-main{
				width: 100%;
			    height: 310rpx;
			    display: flex;
				justify-content: space-around;
				.card1-main-left{
					width: 58%;
					height: 310rpx;
					img{
						width: 100%;
						height: 310rpx;
					}
				}
				.card1-main-right{
					width: 38%;
					height: 310rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					img{
						width: 100%;
						height: 48%;
					}
					
				}
			}
		}
		.more{
			padding: 0 20rpx 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			:first-child{
				font-size: 35rpx;
				font-weight: 600;
			}
			:last-child{
				color: #69707A;
			}
		}
		.card2{
			width: 96%;
			height: 400rpx;
			margin: auto;
			padding: 5rpx;
			margin-top: 10rpx;
			border-radius: 5rpx;
			margin-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			.card2-left{
				width: 46%;
				height: 100%;
				background-color:#fff;
				box-shadow: x-shadow 0 10px 10px rgba(0, 0, 0, .5);
				padding: 10rpx;
				position: relative;
				img{
					width: 100%;
					height: 50%;
				}
				span{
					color: #69707A;
					font-size: 25rpx;
				}
				.card2-bottom{
					position: absolute;
					left: 10rpx;
					bottom: 20rpx;
					line-height: 30rpx;
					.promotion{
						color: #B31B1B;
						border: 1px solid #B31B1B;
						margin-right: 15rpx;
					}
					.price{
						color: #B31B1B;
						font-size: 35rpx;
						font-weight: 300;
					}
				}
			}
		}
	}
	
</style>